<div fxLayoutAlign="center">
  <mat-card>
    <mat-card-header></mat-card-header>
    <h3><span translate>TITLE_SEARCH_RESULTS</span> - <span [innerHtml]="results.orderNo"></span></h3>
    <h4 translate>LABEL_EXPECTED_DELIVERY</h4>
    <div class="container-fluid well">
      <div class="row fa-4x">
        <i class="fas fa-warehouse"></i>
        <i class="fas fa-sync fa-spin"></i>
        <i class="fas fa-truck-loading"></i>
        <i class="fas fa-truck"></i>
        <span class="fa-layers fa-fw">
          <i class="fas fa-home"></i>
          <span class="fa-layers-counter accent-notification" style="width: max-content">{{results.eta}} {{'LABEL_DAYS' | translate}}</span>
        </span>
      </div>
    </div>
  </mat-card>
</div>

<div class="table-wrapper" fxLayoutAlign="center">
  <div class="table-heading">
    <h4 translate>LABEL_PRODUCT_ORDERED</h4>
  </div>
</div>

<div fxLayoutAlign="center">
  <mat-table class="mat-elevation-z8" #table [dataSource]="dataSource">

    <ng-container matColumnDef="product">
        <mat-header-cell *matHeaderCellDef translate>LABEL_PRODUCT</mat-header-cell>
        <mat-cell class="product-name" *matCellDef="let product"> {{product.name}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="price">
        <mat-header-cell *matHeaderCellDef fxShow fxHide.lt-md translate>LABEL_PRICE</mat-header-cell>
        <mat-cell class="product-price" *matCellDef="let product" fxShow fxHide.lt-md> {{product.price}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="quantity">
      <mat-header-cell *matHeaderCellDef translate>LABEL_QUANTITY</mat-header-cell>
      <mat-cell class="product-quantity" *matCellDef="let product"> {{product.quantity}}</mat-cell>
    </ng-container>


    <ng-container matColumnDef="total price">
      <mat-header-cell *matHeaderCellDef translate>LABEL_TOTAL_PRICE</mat-header-cell>
      <mat-cell class="product-total" *matCellDef="let product"> {{product.total}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>
